<template>
  <el-table border :data="warrantFeeRecords" cell-class-name="input-td">
    <el-table-column label="应缴担保费截止时间" align="center">
      <template slot-scope="scope">
        {{ $utils.dateFormat(scope.row.due_warrant_date, 'yyyy年MM月dd日') }}
      </template>
    </el-table-column>
    <el-table-column
      label="应交担保费（元）"
      align="center"
      prop="due_warrant_fee"
    ></el-table-column>
    <el-table-column label="实际缴担保费时间" align="center">
      <template slot-scope="scope">
        <el-date-picker
          v-model="scope.row.actual_warrant_date"
          type="date"
          placeholder="缴费时间"
          class="w-100 text-center"
          value-format="yyyy-MM-dd"
          @change="submitWarrant(scope.row, 'actual_warrant_date')"
        ></el-date-picker>
      </template>
    </el-table-column>
    <el-table-column label="实际担保费" align="center">
      <template slot-scope="scope">
        <el-input
          v-model="scope.row.actual_warrant_fee"
          class="text-center"
          @blur="submitWarrant(scope.row, 'actual_warrant_fee')"
        ></el-input>
      </template>
    </el-table-column>
    <el-table-column label="担保费支付状态" align="center">
      <template slot-scope="scope">
        <c-select
          v-model="scope.row.pay_status"
          :options="payStatusOptions"
          class="w-100"
          @change="onWarrantChange(scope.row)"
        ></c-select>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
import warrantFeeRecord from '@/credit/mixin/mission/warrantFeeRecord'

export default {
  components: {},
  mixins: [warrantFeeRecord],
  props: {
    relatedId: String,
  },
  data() {
    return {
      payStatusOptions: {
        0: '未支付',
        1: '已支付',
      },
    }
  },
  computed: {},
  watch: {
    relatedId: {
      handler: function (val) {
        if (val) {
          this.id = val
          this.getData()
        }
      },
    },
  },
  created() {},
  mounted() {},
  methods: {
    async getData() {
      this.getWarrantFeeRecord(this.id)
    },

    async submitWarrant(row, key) {
      if (row[key] === this.warrantFeeRecordExists[key]) return

      this.updateWarrantFeeRecordById(row.id, {
        [key]: row[key],
      })
    },

    async onWarrantChange(row) {
      const data = {
        actual_warrant_date: row.actual_warrant_date,
        actual_warrant_fee: row.actual_warrant_fee,
        pay_status: row.pay_status,
      }

      if (+data.pay_status === 0) {
        data.actual_warrant_fee = '0'
      } else {
        if (!data.actual_warrant_fee || +data.actual_warrant_fee === 0) {
          data.actual_warrant_fee = row.due_warrant_fee
        }
        if (!data.actual_warrant_date) {
          data.actual_warrant_date = row.due_warrant_date
        }
      }

      this.updateWarrantFeeRecordById(row.id, data, this.id)
    },
  },
}
</script>
<style lang="scss" scoped></style>
